import { Component, OnInit } from '@angular/core';
import {MsgResult} from "../../../models/msg-result";
import {AppConstants, MsgConstants} from "../../../constants/constants";
import {ResponseUtil} from "../../../util/response-util";
import {LogUtil} from "../../../util/log-util";
import {OneDialogService} from "../../../widgets/one-dialog/one-dialog.service";
import {AccountsService} from "../../../admin/permission/accounts/accounts.service";
import {DataStorageUtil} from "../../../util/data-storage-util";
import {ThemesService} from "../../../admin/permission/themes/themes.service";

declare var $;

@Component({
  selector: 'app-datav-setting',
  templateUrl: './datav-setting.component.html',
  styleUrls: ['./datav-setting.component.css']
})
export class DatavSettingComponent implements OnInit {


  hasBindedResize: boolean = false;

  my_skins:Array<any> = [];


  constructor(
    private response: ResponseUtil,
    private logUtil: LogUtil,
    private dialogService: OneDialogService,
    private accountsService: AccountsService,
    private dataStorage:DataStorageUtil,
    private themesService :ThemesService
  ) { }

  ngOnInit() {
    this.fix($(".control-sidebar-bg"));
    this.fix($(".control-sidebar"));
    this.getThemeInfos();
    this.setup();
  }

  ngAfterContentInit(){
  }

  fix = (sidebar) => {
    if ($("body").hasClass('layout-boxed')) {
      sidebar.css('position', 'absolute');
      sidebar.height($(".wrapper").height());
      if (this.hasBindedResize) {
        return;
      }
      $(window).resize(function () {
        this.fix(sidebar);
      });
      this.hasBindedResize = true;
    } else {
      sidebar.css({
        'position': 'fixed',
        'height': 'auto'
      });
    }
  };

  /**
   * 获取主题信息
   */
  getThemeInfos(){
    this.themesService.getThemeInfos().subscribe(
      result => this.response.success(result, this.processThemeResult),
      error => this.response.error(error)
    );
  }

  private processThemeResult = (result: MsgResult) =>{
    if(result && result.code == MsgConstants.MSG_CODE_OK){
      this.my_skins = result.data;
    }
    if(result && result.code != MsgConstants.MSG_CODE_OK){
      this.dialogService.info(result.message);
    }
  }

  /**
   *  点击设置主题
   * @param theme
   * @returns {boolean}
   */
  change_skin(theme) {

    this.changeTheme(theme.code);

    this.store(theme);
    return false;
  }

  /**
   *  保存主题
   * @param theme
   */
  store(theme) {
    if (typeof (theme.id) !== 'undefined') {
      // 保存主题到数据库
      this.setPersonalTheme(theme.id);
      // 保存主题到本地
      this.dataStorage.set(AppConstants.theme,theme.code);
    } else {
      this.dialogService.modalError("设置个人主题失败！");
    }
  }

  /**
   *
   * @returns void
   */
  setup() {
    let tmp = this.dataStorage.get(AppConstants.theme);
    if (tmp && $.inArray(tmp, this.my_skins)) {
      this.changeTheme(tmp);
    }
    this.fix($(".control-sidebar-bg"));
    this.fix($(".control-sidebar"));
  }

  /**
   *  改变主题
   *  1.先移除主题之前所有样式；
   *  2. 重新添加新主题样式；
   * @param code
   */
  changeTheme(code){
    $("body").removeClass().addClass('skin-'+code+' sidebar-mini');
  }

  /**
   *
   * @param themeId
   */
  setPersonalTheme(themeId){
    this.accountsService.setTheme(themeId).subscribe(
      result => this.response.success(result , this.processSetThemeResult),
      error => this.response.error(error)
    );
  }

  private processSetThemeResult=(result : MsgResult)=>{
    if(result && result.code == MsgConstants.MSG_CODE_OK){
      this.logUtil.info("个人主题设置成功！");
    }
    if(result && result.code != MsgConstants.MSG_CODE_OK){
      this.logUtil.info("个人主题设置失败！");
    }
  }


}
